<template>
  <div class="video-stream-test">
    <h2>视频流媒体测试</h2>
    
    <div class="test-info">
      <p><strong>测试说明：</strong></p>
      <ul>
        <li>这个页面测试视频的Range请求支持</li>
        <li>如果视频可以拖动进度条，说明Range请求工作正常</li>
        <li>检查浏览器开发者工具的Network标签，应该能看到206状态码</li>
      </ul>
    </div>

    <div class="video-container">
      <h3>测试视频播放器</h3>
      <video
        ref="testVideo"
        controls
        width="800"
        height="450"
        preload="metadata"
        @loadstart="onLoadStart"
        @loadedmetadata="onLoadedMetadata"
        @canplay="onCanPlay"
        @error="onError"
      >
        <source :src="testVideoUrl" type="video/mp4">
        您的浏览器不支持视频播放。
      </video>
      
      <div class="video-info">
        <p><strong>视频URL:</strong> {{ testVideoUrl }}</p>
        <p><strong>加载状态:</strong> {{ loadStatus }}</p>
        <p><strong>是否可以拖动:</strong> {{ canSeek ? '是' : '否' }}</p>
      </div>
    </div>

    <div class="test-controls">
      <el-button @click="testSeek">测试跳转到30秒</el-button>
      <el-button @click="testSeek60">测试跳转到60秒</el-button>
      <el-button @click="checkNetworkRequests">检查网络请求</el-button>
    </div>

    <div class="network-info">
      <h3>网络请求信息</h3>
      <div class="request-log">
        <div v-for="(log, index) in requestLogs" :key="index" class="log-item">
          {{ log }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

const testVideo = ref(null);
const loadStatus = ref('未开始');
const canSeek = ref(false);
const requestLogs = ref([]);

// 生成测试视频URL
const generateTestVideoUrl = () => {
  const username = localStorage.getItem("username") || "admin";
  const filename = "肌肉帥哥_Recsonxxx_無套_1.mp4"; // 使用API返回的文件名
  const baseUrl = "http://192.168.31.222:3000";
  return `${baseUrl}/fileUploadDownload/video/${username}/${encodeURIComponent(filename)}`;
};

const testVideoUrl = ref(generateTestVideoUrl());

// 事件处理
const onLoadStart = () => {
  loadStatus.value = '开始加载';
  addLog('视频开始加载');
};

const onLoadedMetadata = () => {
  loadStatus.value = '元数据已加载';
  canSeek.value = true;
  addLog('视频元数据已加载，可以拖动进度条');
};

const onCanPlay = () => {
  loadStatus.value = '可以播放';
  addLog('视频可以播放');
};

const onError = (event) => {
  loadStatus.value = '加载错误';
  addLog(`视频加载错误: ${event.target.error?.message || '未知错误'}`);
  ElMessage.error('视频加载失败');
};

// 测试功能
const testSeek = () => {
  if (testVideo.value) {
    testVideo.value.currentTime = 30;
    addLog('尝试跳转到30秒');
  }
};

const testSeek60 = () => {
  if (testVideo.value) {
    testVideo.value.currentTime = 60;
    addLog('尝试跳转到60秒');
  }
};

const checkNetworkRequests = () => {
  addLog('请检查浏览器开发者工具的Network标签');
  addLog('正常情况下应该看到:');
  addLog('1. 初始请求返回206状态码');
  addLog('2. 拖动进度条时发送新的Range请求');
  ElMessage.info('请打开浏览器开发者工具查看Network标签');
};

const addLog = (message) => {
  const timestamp = new Date().toLocaleTimeString();
  requestLogs.value.push(`[${timestamp}] ${message}`);
};

onMounted(() => {
  addLog('页面加载完成');
  addLog(`测试视频URL: ${testVideoUrl.value}`);
});
</script>

<style lang="less" scoped>
.video-stream-test {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;

  h2 {
    color: #303133;
    margin-bottom: 20px;
  }

  .test-info {
    background: #f0f9ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;

    p {
      margin: 0 0 8px 0;
      font-weight: 600;
    }

    ul {
      margin: 8px 0 0 0;
      padding-left: 20px;

      li {
        margin-bottom: 4px;
      }
    }
  }

  .video-container {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;

    h3 {
      margin: 0 0 16px 0;
      color: #303133;
    }

    video {
      width: 100%;
      max-width: 800px;
      border-radius: 8px;
      background: #000;
    }

    .video-info {
      margin-top: 16px;
      padding: 12px;
      background: #f5f7fa;
      border-radius: 4px;

      p {
        margin: 4px 0;
        font-size: 14px;
      }
    }
  }

  .test-controls {
    text-align: center;
    margin-bottom: 24px;

    .el-button {
      margin: 0 8px;
    }
  }

  .network-info {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    h3 {
      margin: 0 0 16px 0;
      color: #303133;
    }

    .request-log {
      background: #1e1e1e;
      color: #d4d4d4;
      padding: 16px;
      border-radius: 4px;
      font-family: 'Courier New', monospace;
      font-size: 12px;
      max-height: 300px;
      overflow-y: auto;

      .log-item {
        margin-bottom: 4px;
        line-height: 1.4;
      }
    }
  }
}

@media (max-width: 768px) {
  .video-stream-test {
    padding: 15px;

    .video-container video {
      height: auto;
    }

    .test-controls {
      .el-button {
        display: block;
        width: 100%;
        margin: 8px 0;
      }
    }
  }
}
</style>
